<template>
    <div class="page-wrap">
        <div class="margin-b-16" style="padding: 0 8px">
            <filter-form @change="handleChange" />
        </div>
        <flexbox justify="space-between" align="center" class="table-toolbar-wrap">
            <div class="table-title">系统列表</div>
            <a-tooltip title="表格列配置">
                <column-setting :columns="settingColumns" @setColumns="setColumns" />
            </a-tooltip>
        </flexbox>
        <custom-table autoResize rowKey="id" size="small" :loading="loading" :columns="tableColumns" :data-source="list" :pagination="paginationConfig" @change="handleTableChange">
            <template #catalogName="{ record }">
                <span>
                    {{ record.pbiProductName }}
                </span>
            </template>
            <template #catalogType="{ record }">
                {{ $filters.catalogTypeFilter(record.catalogType) }}
            </template>
            <template #projectKey="{ text }">
                <span>{{ text || '未对接' }}</span>
            </template>
            <template #systemName="{ record }">
                <a @click="showDetail(record.id)">{{ record.systemName }}</a>
            </template>
            <template #isOutsideSystem="{ text }">
                {{ text === '1' ? '外部' : '内部' }}
            </template>
            <template #status="{ record }">
                <a-badge status="success" :text="$filters.systemStatusFilter(record.status)" />
            </template>
            <template #systemType="{ record }">
                {{ $filters.valToNameFilter('systemType', record.systemType) }}
            </template>
            <template #startTime="{ record }">
                {{ $filters.dateFilter(record.startTime) }}
            </template>

            <template #需求管理员="{ record }">
                <span>
                    {{ record.pmpSystemManagers['需求管理员']?.map((item) => item.empName).join(',') }}
                </span>
            </template>
            <template #产品负责人="{ record }">
                <span>
                    {{ record.pmpSystemManagers['产品经理']?.map((item) => item.empName).join(',') }}
                </span>
            </template>

            <template #action="{ record }">
                <a @click="jumpTo(record.id)">详情</a>
            </template>
        </custom-table>
    </div>
</template>

<script lang="ts">
import FilterForm from './components/FilterForm.vue';
import { CustomTable, ColumnSetting } from '@/components';
import { useRouter } from 'vue-router';
import { useTableData, useTableLoading, usePagination, useTableColumns, useTableFormSearch, useTableAction } from '@/components/Table/hooks/index';
import { useMountedAndActivated } from '@/hooks/common/useMountedAndActivated';
import store from '@/store';
import { defineComponent, computed } from 'vue';
export default defineComponent({
    name: 'productAnalysisList',
    components: {
        CustomTable,
        ColumnSetting,
        FilterForm
    },
    setup() {
        const router = useRouter();
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns, settingColumns, setColumns } = useTableColumns('system');
        const { handleTableChange, list, getList, setList, setSearchQuery } = useTableData(setLoading, paginationConfig, setPaginationConfig, 'system');
        const { handleSearch } = useTableFormSearch(setPaginationConfig, setSearchQuery, getList);
        const { showDetail } = useTableAction('system', getList);
        const jumpTo = (id: number) => {
            router.push({
                path: '/setting/system/systemDetail',
                query: {
                    id
                }
            });
        };
        const isAdmin = computed(() => {
            return store.getters.userInfo.roles.includes('admin');
        });
        const isTeamLeader = computed(() => {
            return store.getters.userInfo.roles.includes('需求管理员');
        });
        const disabled = computed(() => {
            return !isAdmin.value && !isTeamLeader.value;
        });
        setSearchQuery({
            manager: store.getters.userInfo.employeeDTO.empId
        });
        const handleChange = (query) => {
            setPaginationConfig({
                current: 1
            });
            setSearchQuery({
                ...query
            });
            getList();
        };
        useMountedAndActivated(getList);
        return {
            list,
            tableColumns,
            loading,
            paginationConfig,
            handleSearch,
            showDetail,
            disabled,
            jumpTo,
            settingColumns,
            setColumns,
            handleTableChange,
            handleChange
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 12px 24px;
    background: #fff;
    .table-toolbar-wrap {
        margin: 16px 0;
        .btn-group-wrap {
            .ant-btn + .ant-btn {
                margin-left: 8px;
            }
        }
    }
    .table-title {
        font-size: 16px;
        font-weight: bold;
    }
}
</style>